<!--
 * @Author: 刘金开 liujinkai@jiankeyan.com
 * @Date: 2023-07-14 23:26:23
 * @LastEditors: 刘金开 liujinkai@jiankeyan.com
 * @LastEditTime: 2023-07-15 00:02:21
 * @FilePath: \font\src\components\table.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-table 
			v-loading="config.loading"
			header-row-style="48px"
			height='580'
			border
			:class="{ 'table': '', 'noScrol': config.tableText }" 
			ref="multipleTable" 
			:header-cell-class-name="config.cellClass"
			:data="tableData" 
            >
	<!-- 设置空数据时候自定义样式文案 这里我设置了没有数据的时候不显示滚动条且暂无数据文案居中加了一个背景图显得更加好看，主要是在当表头数据过多的时候显示更加完美-->		
	<template v-slot:empty >
		<p :class="{'el-table-empty-p':config.tableText}">{{config.tableText}}</p>
	</template>		
	
	<!-- 多选框 config.isSelection是否需要多选框-->
	<el-table-column v-if="config.isSelection" type="selection" width="55" align="center" fixed="left"></el-table-column>
	
	<el-table-column  label="序号" width="55" type="index" align="center" fixed="left"></el-table-column>
	
    <el-table-column v-for="(th, key) in tableHeader"
                     :key="key"
					            :type="th.type"
                     :prop="th.prop"
                     :label="th.label"
                     :fixed="th.fixed"
                     :sortable="th.sortable?true:false"
                     :filters="th.filters"
                     :column-key="th.columnKey"
                     :filtered-value="th.filteredValue"
                     :filter-multiple="th.filterMultiple"
                     :width="th.width" :align="th.center || 'center'">
      <template #default="scope">
		  <!-- 主要转换一些枚举型或者数组转字符串的数据等等。。。-->
        <v-slot v-if="th.render" :render="th.render" :row="scope.row" :index="scope.$index" :column="th" />
		<!-- 操作按钮 这里建议使用el-button 我这里是根据自己的需求设计的 -->
		<div v-else-if="th.operation">
			<el-link type="primary" href="javascript:;"  v-for="(o, key) in th.operation" :key="key"
				 @click="o.clickFun(scope.$index,scope.row)">
				 <span v-if="o.fName">{{o.fName(scope.$index,scope.row)}}</span>
				 <span v-else>{{o.name}}</span>
			</el-link>
		</div>
        <span v-else>{{ scope.row[th.prop] || '-' }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
	
import { h} from 'vue';

  export default {
    name: 'v-table',

    props: {
		//其他参数配置
		config:{
			type: Object,
			default: function () {
			  return null
			}
		},
      // 表格数据
      tableData: {
        type: Array,
        default: function () {
          return []
        }
      },
      // 表头数据
      tableHeader: {
        type: Array,
        default: function () {
          return []
        }
      },
    },
	setup(props,context){
	}
  }
</script>
<style scoped>
	/* 设置全选按钮不显示 */
	:deep(.disabledCheck .cell){
		display: none !important;
	}
</style>
